import { Link } from '@brillout/docpress'
import { UiFrameworkExtension } from '../../components'

Detailed information about Vike's Filesystem Routing.

For a quick overview see <Link href="/routing#filesystem-routing" doNotInferSectionTitle /> instead.

## Ignored directories

#### Filesystem Routing

Following directories are ignored by Filesystem Routing:
 - `src/`
 - `index/`
 - `pages/`
 - <Link href="/routing#groups">`(someDir)/`</Link> (any directory inside parentheses)
 - <Link href="#renderer">`renderer/`</Link>

```yaml
FILESYSTEM                                                    URL
========================================================      ========
pages/index/+Page.ts                                          /
src/(marketing)/pages/jobs/+Page.ts                           /jobs
pages/pages/src/(some-dir)/about/renderer/index/+Page.ts      /about
```

#### Config Inheritance

Note that, except for `pages/` and `renderer/`, the directories above aren't ignored by <Link href="/config#inheritance">config inheritance</Link>:

```yaml
pages/index/+config.ts
# The +config.ts above doesn't apply to pages/about/
pages/about/+Page.ts
```

```yaml
# This +config.ts file applies to pages/admin-panel/**/*
pages/admin-panel/+config.ts
# This +config.ts file applies to pages/(marketing)/**/*
pages/(marketing)/+config.ts
```

Unlike the other ignored directories, the `pages/` and `renderer/` directories are also ignored by config inheritance:

```yaml
###################
## Configuration ##
###################
# This +config.ts file applies everywhere (i.e. /**/* — including the root directory)
pages/+config.ts
# This +onRenderClient.ts hook applies everywhere (i.e. /**/* — including the root directory)
renderer/+onRenderClient.ts
# This +onRenderHtml.ts hook applies only to admin-panel/**/*
admin-panel/renderer/+onRenderHtml.ts
# This +onRenderHtml.ts hook applies only to (marketing)/**/*
(marketing)/pages/+onRenderHtml.ts

###################
###### Pages ######
###################
# This page is configured by:
# - pages/+config.ts
# - renderer/+onRenderClient.ts
# - (marketing)/pages/+onRenderHtml.ts
(marketing)/pages/index/+Page.ts
# This page is configured by:
# - pages/+config.ts
# - renderer/+onRenderClient.ts
# - admin-panel/renderer/+onRenderHtml.ts
admin-panel/pages/index/+Page.ts
```

> We call defining multiple `pages/` directories a <Link href="/file-structure">domain-driven file structure</Link> — note how `(marketing)/pages/` and `admin-panel/pages/` are defined instead of `pages/(marketing)/` and `pages/admin-panel/`.

> See also:
>  - <Link href="/onRenderHtml" />
>  - <Link href="/onRenderClient" />


## Case sensitive

Filesystem Routing is case sensitive:

```yaml
FILESYSTEM                     URL
========================       ======
pages/HELLO/+Page.ts           /HELLO
```


## Crawl

Vike crawls:
- Files inside [Vite's `root` directory](https://vitejs.dev/config/shared-options.html#root).
  > Consequently, all your <Link href="/config#files">`+` files</Link> must live inside `root`.
  > To make a directory or file outside of `root` crawlable, use a symlink (e.g. `$ ln -s`) and set `VIKE_CRAWL="{git:false}"`.
- Skips [built-in ignore patterns](https://github.com/vikejs/vike/blob/main/packages/vike/node/vite/shared/resolveVikeConfigInternal/crawlPlusFiles/ignorePatternsBuiltIn.ts) such as `node_modules/` and `ejected/`.
  > To add custom ignore patterns, see [#2228](https://github.com/vikejs/vike/issues/2228).
- Skips `.gitignore` files (if you use Git).
  > If you want to also crawl these then set `VIKE_CRAWL="{git:false}"`.
- Skips soft-symlinked (`$ ln -s`) directories (if you use Git).
  > If you want to also crawl these then set `VIKE_CRAWL="{git:false}"`.

By default, if you use Git, Vike uses `$ git ls-files` to crawl your files. If you set `VIKE_CRAWL="{git:false}"` then Vike uses [`tinyglobby`](https://github.com/SuperchupuDev/tinyglobby) instead of Git.

```bash
# Use tinyglobby instead of Git to crawl files
$ VIKE_CRAWL="{git:false}" npm run dev
```

You can tell Vike to skip certain files and/or directories from being crawled, see [#2228](https://github.com/vikejs/vike/issues/2228).


## `renderer/`

If you don't use a <UiFrameworkExtension /> then we recommend placing your UI framework integration inside a `renderer/` directory.

```yaml
# Usual Vike file structure
/pages/
/components/
/server/

# Code that specifies how pages are rendered
/renderer/+onRenderHtml.ts
/renderer/+onRenderClient.ts
/renderer/Layout.{jsx,vue}  # React/Vue/... component that wraps the `Page` component
/renderer/Layout.css
/renderer/Header.{jsx,vue} # Website header used for every page
/renderer/Footer.{jsx,vue} # Website footer used for every page
/renderer/logo.svg # Website logo (favicon and used by <Header>)
```

The hooks `/renderer/+onRender{Html,Client}.js` apply as default to all pages `/pages/**/+Page.js`.

The `renderer/` directory doesn't add any functionality: defining the hooks `+onRender{Html,Client}.js` at `/renderer/` is equivalent to defining them at `/pages/` or `/`. It's just an optional convenience for moving rendering logic outside of `pages/`: in order to avoid cluttering the `pages/` directory and to organize and put all rendering code in one place.

> We recommend defining a `renderer/` directory only if you are implementing a custom UI framework (React/Vue/Solid/...) integration.


## See also

 - <Link href="/routing" />
 - <Link href="/filesystemRoutingRoot" />
